<template>
  <div>
    <el-dialog
      class="dia-style"
      :title="title"
      :visible.sync="open"
      lock-scroll="false"
      :modal-append-to-body="false"
    >
      <div class="dialog-box">
        <div class="dialog-left">
          <div class="dialog-left-item">风险预警名称</div>
          <div class="dialog-left-item">单位</div>
          <div class="dialog-left-item">级别</div>
          <div class="dialog-left-item">状态</div>
          <div class="dialog-left-item1">风险预警详情</div>
          <div class="dialog-left-item" style="color: #4b6eef">
            关联预警规则
          </div>
          <div class="dialog-left-item">预警生成时间</div>
          <div class="dialog-left-item2">预警响应信息</div>
        </div>
        <div class="dialog-right">
          <div class="dialog-right-item">
            运行管理风险预警-兵团公安局-20221210001
          </div>
          <div class="dialog-right-item">兵团公安局</div>
          <div class="dialog-right-item" style="color: #ffbf9b">中</div>
          <div class="dialog-right-item">
            <img
              src="@/assets/images/zhuangtai1.png"
              alt="example"
              style="
                vertical-align: middle;
                width: 14px;
                height: 14px;
                margin-right: 5px;
              "
            />
            <span>待下发</span>
          </div>
          <div class="dialog-right-item1">
            <span>
              兵团公安局,运行管理风险评估值大于设置阀值75,其中,用户行为风险评估值80...
              <!-- 管理员行为风险评估值70、网络应用行为风险评估值78、外部边界风险评估值70、管理配置评估值72。 -->
            </span>
          </div>
          <div class="dialog-right-item" style="color: #4b6eef">
            所有单位-运行管理风险预警规则
          </div>
          <div class="dialog-right-item">2022.10.11 11:00:21</div>
          <div class="dialog-right-item2">-</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">预警 下发</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { addDictClassify, updateDictClassify } from '@/api/milkyway/dictManager'
export default {
  props: {
    title: {
      type: String,
      default() {
        return "下发风险预警";
      },
    },
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: "100",
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置

      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
        sort: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.form;
      },
      set(val) {},
    },
  },
  watch: {},
  created() {},
  methods: {
    show() {
      this.open = true;
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
.dia-style {
  width: 1700px;
}
.dialog-box {
  display: flex;
  width: 810px;
  height: 437px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  //   margin-left: 34px;
  .dialog-left {
    width: 50%;
    background: rgba(243, 245, 252, 0.5);
    border-radius: 4px 4px 0px 0px;
    width: 160px;
    // height: 48px;
    .dialog-left-item {
      height: 48px;
      line-height: 48px;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .dialog-left-item1 {
      height: 96px;
      line-height: 96px;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .dialog-left-item2 {
      height: 48px;
      line-height: 48px;
      text-align: center;
      //   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
  }
  .dialog-right {
    width: 660px;
    .dialog-right-item {
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 30px;
    }
    .dialog-right-item1 {
      height: 96px;
      line-height: 96px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 30px;
      word-wrap: break-word;
    }
    .dialog-right-item2 {
      height: 48px;
      line-height: 48px;
      //   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 30px;
    }
  }
}
::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
}
</style>
